<template>
  <div class="main">
    <!-- 头部 -->
    <div class="header">
      <div class="left">
        <span>等待:</span>
        <span>10</span>
      </div>
      <div class="middle">
        <ButtonGroup slot="title">
          <Button
            @click="handleType('queue')"
            class="header-btn"
            :type="nowBtnType"
          >
            正在排队
          </Button>
          <Button
            @click="handleType('finish')"
            class="header-btn"
            :type="finishBtnType"
          >
            已完成
          </Button>
        </ButtonGroup>
      </div>
      <div class="right">
        <Dropdown trigger="click">
          <span>
            {{ getUserName }}
            <Icon type="ios-arrow-down"></Icon>
          </span>
          <DropdownMenu slot="list">
            <DropdownItem>退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <list-table
      class="content"
      :colums="colums"
      :data="data"
      :listTable="listTable"
      @onLoad="onLoad"
    ></list-table>
    <div class="footer">
      <div class="footer-item">
        <Button class="footer-btn" :style="{ background: '#6cd560' }">
          下一位
        </Button>
      </div>
      <div class="footer-item">
        <Button class="footer-btn" :style="{ background: '#109efc' }">
          重呼
        </Button>
      </div>
      <div class="footer-item">
        <Button class="footer-btn" :style="{ background: '#db6565' }">
          过号
        </Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Getter, namespace } from "vuex-class";
const userModule = namespace("user");
// 引入组件
import ListTable from "_c/list-table";
// 引入接口
import { getGetNumberInfo } from "api/getNumber";
// 引入工具函数
import { formatTime, formatDataBaseTime } from "libs/tools";
@Component({
  components: {
    ListTable
  }
})
export default class CallNumber extends Vue {
  active: String = "";
  numberType: String = "queue";
  listTable = {
    finished: false,
    loading: false
  };
  pageIndex = 1;
  pageSize: Number = 20;
  data: any = [];
  colums = [
    {
      title: "编号",
      width: 3,
      key: "code"
    },
    {
      title: "供应商编码",
      width: 6,
      key: "supplier_code"
    },
    {
      title: "供应商名称",
      key: "MC"
    },
    {
      title: "取号时间",
      width: 6,
      key: "get_number_time"
    }
  ];
  get nowBtnType() {
    return this.numberType === "queue" ? "primary" : "default";
  }
  get finishBtnType() {
    return this.numberType === "finish" ? "primary" : "default";
  }
  @userModule.Getter private getUserName!: String;
  handleType(type) {
    this.numberType = type;
  }
  onLoad() {
    this.pageIndex++;
    this.initData();
  }
  /**
   * @description 初始化表格数据
   */
  initData() {
    let data = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize
    };
    getGetNumberInfo(data).then(res => {
      this.listTable.loading = false;
      if (res.data.code === 200) {
        res.data.result.forEach(item => {
          item.get_number_time = formatDataBaseTime({
            time: item.get_number_time,
            type: "time"
          });
          this.data.push(item);
        });
        if (res.data.result.length < this.pageSize) {
          this.listTable.finished = true;
        }
      } else {
        this.listTable.finished = true;
      }
    });
  }
  created() {
    this.initData();
  }
}
</script>

<style lang="less" scoped>
@media screen and(min-width:751px) {
  .header-btn,
  .footer-btn {
    height: 60px;
  }
}
@media screen and(max-width:750px) {
  .header-btn,
  .footer-btn {
    height: 40px;
  }
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    .left {
      flex-grow: 1;
    }
    .middle {
      flex-grow: 3;
      display: flex;
      justify-content: center;
      .header-btn {
        display: inline-block;
        width: 200px;
        font-size: 16px;
      }
    }
    .right {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  .content {
    flex-grow: 1;
    overflow: auto;
  }
  .footer {
    border-top: 1px solid lightgrey;
    display: flex;
    .footer-item {
      flex-grow: 1;
      .footer-btn {
        display: block;
        width: 200px;
        color: #fff;
        border-radius: 5px;
        margin: 10px auto;
        font-size: 20px;
      }
    }
  }
}
</style>
